<template>
  <div class="aideBox">
    <div class="aide" slot="reference" @click="drawer = true">
      <div class="name">目录</div>
    </div>
    <div class="AIdrawer">
      <el-drawer title="目录" :modal="false" :wrapperClosable="false" :visible.sync="drawer" direction="ltr" :size="widthsize">
        <el-tree  :current-node-key="nodeKey" highlight-current @node-click="handleNodeClick" :data="menu" :expand-on-click-node="false" ref="tree" node-key="id"
          default-expand-all :props="defaultProps">
        </el-tree>
      </el-drawer>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    menu: {
      type: Array
    },
    nodeKey: {
      type: Number
    }
  },
  watch: {
    nodeKey(value){
      this.$refs.tree.setCurrentKey(value)
    }
  },
  components: {},
  data() {
    return {
      drawer: true,
      widthsize: "320px",
      windowWidth: window.innerWidth,
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    };
  },
  beforeDestroy() { },
  mounted() {
    this.handleResize();
  },
  created() { },
  methods: {
    handleNodeClick(data,mode,dom) {
      this.$emit('NodeClick', data);
    },
    handleResize() {
      this.windowWidth = window.innerWidth;
      if (this.windowWidth > 768) {
        this.widthsize = "320px";
      } else {
        this.widthsize = "100%";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .AIdrawer {
  .el-drawer__wrapper {
    right: inherit;
    width: 321px;
  }
}

.AIdrawer {
  .el-drawer__wrapper {
    right: inherit;
    width: 321px;
  }
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to right, #f37e3b, #f5b935);
  padding: 10px 15px;

  .name {
    color: #fff;
  }

  .count_icon {
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }
}

.aide {
  position: fixed;
  cursor: pointer;
  z-index: 9;
  top: 40%;
  left: 0;
  background-color: #fff;
  padding: 8px 5px 13px 5px;
  width: 40px;
  border-radius: 0 15px 15px 0;
  box-shadow: 0px 0px 20px 0px rgba(37, 39, 41, .4);
  cursor: pointer;

  .icon {
    background: linear-gradient(#f37e3b, #f5b935);
    margin-bottom: 5px;
    border-radius: 20px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
  }

  .count_icon {
    color: #fff;
    font-size: 18px;
  }

  .name {
    text-align: center;
  }
}

@media (max-width: 750px) {
  ::v-deep .AIdrawer {
    .el-drawer__wrapper {
      width: 100%;
    }
  }

  .AIdrawer {
    .el-drawer__wrapper {
      width: 100%;
    }
  }
}
</style>
